<!-- extend from base layout -->
{% extends "layout.html" %}

{% block content %}
    <div class="container">
    <h2 class="sub-header">Blog New!</h2>
    <div class="table-responsive">
        {# <table class="table table-striped"> #}
        <table class="table table-hover">
            <thead>
            <tr>
                <th>#</th>
                <th>id</th>
                <th>author</th>
                <th>title</th>
                <th>pub_date</th>
                <th>action</th>
            </tr>
            </thead>
            <tbody>
            {% for item in pagination.items %}
            <tr class="text-muted">
                <td>{{ loop.index }}</td>
                <td>{{ item.id }}</td>
                <td>{{ item.author }}</td>
                <td>{{ item.title }}</td>
                <td>{{ item.pub_date }}</td>
                <td>
                    {# <div class="pull-right"> #}
                    <a class="{% if not blog_container_status_list[loop.index0]['collect'] %}text-muted{% endif %}" href="javascript:void(0);" onclick="counter_blog({{ item.id }}, 'collect');" rel="tooltip" title="收藏">
                        <span class="glyphicon glyphicon-heart-empty"></span>
                        <span id="counter_collect_blog_{{ item.id }}">{{ blog_counter_list[loop.index0]['collect'] }}</span>
                    </a>
                    <a class="{% if not blog_container_status_list[loop.index0]['favor'] %}text-muted{% endif %}" href="javascript:void(0);" onclick="counter_blog({{ item.id }}, 'favor');" rel="tooltip" title="支持">
                        <span class="glyphicon glyphicon-thumbs-up"></span>
                        <span id="counter_favor_blog_{{ item.id }}">{{ blog_counter_list[loop.index0]['favor'] }}</span>
                    </a>
                    <a class="{% if not blog_container_status_list[loop.index0]['flag'] %}text-muted{% endif %}" href="javascript:void(0);" onclick="counter_blog({{ item.id }}, 'flag');" rel="tooltip" title="举报">
                        <span class="glyphicon glyphicon-flag"></span>
                        <span id="counter_flag_blog_{{ item.id }}">{{ blog_counter_list[loop.index0]['flag'] }}</span>
                    </a>
                    {# <a href="#"><span class="glyphicon glyphicon-thumbs-down"></span>反对</a> #}
                    {# </div> #}
                </td>
            </tr>
            {% endfor %}
            </tbody>
        </table>
        {# 翻页 #}
        {% from "macros.html" import render_pagination %}
        {{ render_pagination(pagination, 'blog.new') }}
    </div>
    </div>
    <script type="text/javascript">
        function counter_blog(blog_id, stat_type){
            $.getJSON('{{ url_for('blog.stat') }}',
            {
                blog_id: blog_id,
                stat_type: stat_type
            }, function (data) {
                // console.log(data);
                {# {"count": {"collect": "0", "favor": "1", "flag": "0", "view": "0"}, "status": {"collect": false, "favor": true, "flag": false}} #}
                var counter_collect_blog = $('#counter_collect_blog_'+blog_id);
                var counter_favor_blog = $('#counter_favor_blog_'+blog_id);
                var counter_flag_blog = $('#counter_flag_blog_'+blog_id);
                counter_collect_blog.text(data['count']['collect']);
                counter_favor_blog.text(data['count']['favor']);
                counter_flag_blog.text(data['count']['flag']);
                if(data['status']['collect'] == true){
                    counter_collect_blog.parents('a').removeClass('text-muted');
                }
                if(data['status']['favor'] == true){
                    counter_favor_blog.parents('a').removeClass('text-muted');
                }
                if(data['status']['flag'] == true){
                    counter_flag_blog.parents('a').removeClass('text-muted');
                }
            });
        }
    </script>
{% endblock %}